<template>
  <el-card class="mb-5">
    <div class="flex justify-between items-center" slot="header">
      <SelectTime
        @handleChange="handleChange"
        @handleDate="handleDate"
      ></SelectTime>
      <div class="flex flex-col items-center">
        <div class="text-xl font-bold">
          <slot name="title"></slot>
        </div>
        <div class="text-sm font-normal text-gray-500">
          <slot name="remark"></slot>
        </div>
      </div>
    </div>
    <div
      id="user_chart"
      class="w-full "
      style="height:400px"
      ref="user_chart"
    ></div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";

import SelectTime from "../selectTime/selectTime";

import { getUserPieData } from "@/api/dataPanel/userStatistic";

export default {
  name: "",
  data() {
    return {
      form: {
        date_tag: -1,
        start_date: "",
        end_date: ""
      },
      option: {
        tooltip: {
          trigger: "item"
        },
        toolbox: {
          show: true
        },
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc"
        ],
        legend: {
          bottom: "5%",
          left: "center"
        },
        series: [
          {
            name: "业务流水占比",
            type: "pie",
            radius: "50%",
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              },
              normal: {
                label: {
                  show: true,
                  fontSize: "20",
                  fontWeight: "bold",
                  formatter: "{b} : {c} ({d}%)"
                },
                labelLine: { show: true }
              }
            },
            data: [
              { value: 0, name: "房间礼物" },
              { value: 0, name: "盲盒" },
              { value: 0, name: "许愿流星" },
              { value: 0, name: "抢糖果" },
              { value: 0, name: "霍克城堡" }
            ]
          }
        ]
      }
    };
  },
  components: {
    SelectTime
  },
  computed: {
    user_chart() {
      return echarts.init(this.$refs["user_chart"]);
    }
  },
  created() {
    this.handleGetData();
  },
  mounted() {
    let that = this;
    this.drawline();
    window.addEventListener("resize", () => {
      that.user_chart.resize();
    });
  },
  methods: {
    async handleGetData() {
      const { data } = await getUserPieData(this.form);

      this.option.series[0].data.forEach(item => {
        switch (item.name) {
          case "房间礼物":
            item.value = data.room_gift_serial * 1;
            break;
          case "盲盒":
            item.value = data.blind_box_serial * 1;
            break;
          case "许愿流星":
            item.value = data.lucky_tree_serial * 1;
            break;
          case "抢糖果":
            item.value = data.scramble_sugar_serial * 1;
            break;
          case "霍克城堡":
            item.value = data.huoke_serial * 1;
            break;
        }
      });
      this.user_chart.setOption(this.option);
    },
    handleChange(value) {
      this.form = value;
      this.handleGetData();
    },
    handleDate(value) {
      this.form = value;
      this.handleGetData();
    },
    drawline() {
      this.user_chart.setOption(this.option);
    }
  }
};
</script>
<style lang="scss" scoped></style>
